<template>
  <div class="app-container">
        <el-row :gutter="20" class="c-flex c-hidden">
          <el-col :span="24" :xs="24" class="c-flex c-height c-dis-flex-col c-hidden">
            <el-form :model="queryParam" ref="queryForm" :inline="true" label-width="84px" size="small">

              <el-form-item label="考试类型：">
                <el-select v-model="queryParam.examType" clearable>
                  <el-option
                    v-for="dict in dict.type.exam_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="考试名称：">
                <el-input v-model="queryParam.name" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="search">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>

            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <router-link :to="{ path: '/practice/examination/edit' }" class="link-left">
                  <el-button type="primary" plain icon="el-icon-plus" size="mini">新增</el-button>
                </router-link>
              </el-col>
            </el-row>

            <el-table v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%">
              <el-table-column type="index" label="序号" width="55" align="center">
                <template slot-scope="scope">
                  {{ (queryParam.pageNum - 1) * queryParam.pageSize + (scope.$index + 1) }}
                </template>
              </el-table-column>

              <el-table-column prop="name" label="考试名称" align="center" min-width="120px" :show-overflow-tooltip="true"/>
              <el-table-column label="考试类型" align="center" prop="examType" min-width="90px" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.exam_type" :value="scope.row.examType"/>
                </template>
              </el-table-column>
              <el-table-column prop="limitStartTime" label="限制开始时间" align="center" min-width="120px"  :show-overflow-tooltip="true"/>
              <el-table-column prop="limitEndTime" label="限制结束时间" align="center" min-width="120px" :show-overflow-tooltip="true"/>
              <el-table-column prop="examPaperName" label="试卷名称" align="center" min-width="120px" :show-overflow-tooltip="true"/>
              <el-table-column prop="suggestTime" label="建议时长(分)" align="center" min-width="90px" :show-overflow-tooltip="true"/>
              <el-table-column prop="createTime" label="创建时间" width="160px" align="center"/>
              <el-table-column label="操作" align="center" width="150px">
                <template slot-scope="{ row }">

                  <!--
                  <el-button
                    size="mini"
                    @click="
                  $router.push({
                    path: '/practice/examination/edit',
                    query: { id: row.id },
                  })
                "
                  >参与人员
                  </el-button>
                 -->
                  <el-button
                    size="mini"
                    @click="
                  $router.push({
                    path: '/practice/examination/edit',
                    query: { id: row.id },
                  })
                "
                  >编辑
                  </el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deleteExam(row)"
                    class="link-left"
                  >删除
                  </el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParam.pageNum"
              :limit.sync="queryParam.pageSize"
              @pagination="search"
            />
          </el-col>
        </el-row>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { findPageList,deleteExamById } from '@/api/exam/examManage'
import {PaperDeletePaper} from "@/api/examPaper";

export default {
  components: { Pagination },
  dicts: ['exam_type'],
  data() {
    return {
      queryParam: {
        id: null,
        level: null,
        subjectId: null,
        pageNum: 1,
        pageSize: 10
      },
      subjectFilter: null,
      listLoading: false,
      tableData: [],
      total: 0,
      activeName: 'first'
    }

  },
  created() {
    this.search();
  },
  methods: {
    handleClick(tab, event) {
      this.search();
      console.log(tab, event)
    },
    deleteExam(row) {
      let _this = this;
      _this.$modal.confirm('是否确认删除"' + row.name+ '"的数据项？').then(function() {
        return deleteExamById([row.id]);
      }).then(() => {
        _this.queryParam.pageNum=1
        _this.search();
        _this.$modal.msgSuccess("删除成功");
      }).catch(() => {
        _this.$modal.msg('已取消删除');
      });
    },

    /**
     * 重置按钮
     */
    resetQuery() {
      this.queryParam= {
           id: null,
            exam_type:null,
           name:null,
           pageNum: 1,
           pageSize: 10
      },
      this.queryParam.pageNum = 1;
      this.search();
    },

    search() {
      this.listLoading = true
      findPageList(this.queryParam).then((data) => {
        this.tableData = data.rows
        this.tableData.forEach((x=>{
          if(x.limitStartTime ==null){
            x.limitStartTime = '-'
          }
          if(x.limitEndTime ==null){
            x.limitEndTime = '-'
          }
        }))
        this.total = data.total
        this.listLoading = false
      }).catch(() => {
          this.listLoading = false
        })
    },

    deletePaper(row) {
      let _this = this
      PaperDeletePaper(row.id).then((re) => {
        if (re.code === 200) {
          _this.search()
          _this.$message.success(re.message)
        } else {
          _this.$message.error(re.message)
        }
      })
    }
  }
}
</script>
